<!--
 * @Author: chenjiao
 * @Date: 2021-06-30 17:46:52
 * @LastEditTime: 2021-12-04 15:48:24
 * @LastEditors: Please set LastEditors
 * @Description: 会员档案
 * @FilePath: \ebc-admin\src\views\member\MemberInfo\component\Profile.vue
-->
<template>
  <div class="profile">
    <!-- 基础信息 -->
    <el-row>
      <el-col :span="24"><h3>基本信息</h3></el-col>
    </el-row>
    <div class="show-box">
      <el-row :gutter="5">
        <el-col 
          v-for="text in basics"
          :key="text.label"
          :span="text.span || 12"
        >
        <template>
          <span :class="{'active':text.style}">
            {{text.label}} 
            {{ 
              text.show ? text.show(detailInfo) : 
              text.gender ? text.gender(detailInfo[text.key] ) : detailInfo[text.key] 
            }}
          </span>
          <i class="el-icon-view lf" v-if="'isHide' in text" @click="text.isHide = !text.isHide"></i>
        </template>  
        </el-col> 
      </el-row>
    </div>
    <!-- 账号安全 -->
    <el-row>
      <el-col :span="24">
        <div class="account">
          <h3>账号安全</h3>
        </div>
        
      </el-col>
    </el-row>
    <div class="show-box"> 
      <el-row :gutter="5"  class="show-box">
        <el-col 
          v-for="text in account"
          :key="text.label"
          :span="text.span || 12"
        >
          <span v-if="text.key == 'isFaceToken' ">{{text.label}} {{ detailInfo[text.key] ? '已设置': '未设置' }}</span>
          <span v-if="text.key == 'socials'">{{text.label}} {{ bindThird }}</span>
        </el-col>
      </el-row>
    </div>
    <!-- 会员头像模块 -->
     <template>
      <div class="photo-box">
        <el-carousel style="width: 300px;" arrow="always" :autoplay="false">
          <el-carousel-item v-for="(item , index) in imgUrl" :key="index">
            <el-image :src="item" class="el-img" alt="会员头像"></el-image>
          </el-carousel-item>
        </el-carousel>
           <el-button class="eqcode" size="mini" @click="getCode(memberId)"><i class="el-icon-menu"></i></el-button>
           <el-button  type="warning" size="mini" class="vip">{{ detailInfo.levelName?'VIP会员':'普通会员'}}</el-button>
           <el-button type="primary" size="mini" class="auth">{{ detailInfo.isAuth ? '已实名':'未实名'}}</el-button>
           <el-button type="success" size="mini" class="account">{{  detailInfo.memberState === 1 ? '正常' :   detailInfo.memberState == 2 ? '冻结':'禁用'  }}</el-button>
      </div>
     </template>
     <!-- 二维码弹窗 -->
     <el-dialog
      title="会员二维码"
      :visible.sync="eqcode"
      width="30%"
      >
        <span class="eqcode-img"><img :src="imgPay"/></span>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="eqcode = false">关 闭</el-button>
        </span>
    </el-dialog>

  </div>
</template>

<script>
// 数据封装
import { memberDate } from '../../config/list.config'
// 接口
import { getMemberInfo} from '@/api/member.js'
// 公共方法
import { asyncApiFun } from '@/utils/utils'
// 引入插件
// import QRCode from 'qrcode'

const QRCode = require('qrcode')

  export default {
    name:'profile',
    data(){
      return {
        basics:memberDate(true),
        account:memberDate(),
        // imgUrl:require("@/assets/img/photo.png"),
        imgUrl:[],
        eqcode:false, //二维码弹窗
        imgPay:'',
        detailInfo:{},
        memberId:'',   //会员编号
      }
    },
    created(){
      this.initDetail()
    },
    computed:{
      // 账号安全-第三方平台
      bindThird(){
        let _thirdparty = this.detailInfo.socials
        let _socials = []
         if( _thirdparty){
            _thirdparty.forEach(ele => {
              switch(ele.socialType){
                case 1:
                  ele.socialType = '支付宝'
                  break
                case 2:
                  ele.socialType= '微信'
                  break  
                case 3:
                  ele.socialType = '微博'
                  break
                case 4:
                  ele.socialType = 'FACE'
                  break
                case 6:
                  ele.socialType = 'QQ'
                  break
              }
            _socials.push(ele.socialType)
            });
          }
        return _socials.join(' ')
      }
    },
    methods: {
      // 生成二维码
      getCode(){
        this.eqcode = true
        QRCode.toDataURL(this.memberId)
          .then(url => {
            this.imgPay = url  //this.imgPay 就是二维码资源信息，直接使用就行<img :src="imgPay" alt="">
           
          })
          .catch(err => {  //异常时的处理
            console.error(err)
          })
      },
   
      //初始化  
     async initDetail(){
        // 会员ID
         const { memberId } = this.$route.query
         this.memberId = memberId
         const [res] =  await asyncApiFun(getMemberInfo, memberId)
        //  console.log(res)
         if(res){
            const _mobile = res.data.mobile;
            res.data.mobile2 = _mobile.substring(0, 3)+ "****" + _mobile.substr(_mobile.length-4)   
            this.detailInfo = res.data;
            this.imgUrl = res.data.avatar?.split(',')
          }
      }
  
    }
  }
</script>

<style lang="scss" scoped>
.profile{
  width: 90%;
  margin: 0 auto;
  position: relative;
}
.el-col{
  height: 60px;
  
}
.el-col h3{
  height:40px;
  display:table-cell;
  vertical-align: middle;
  border-left:10px solid #409eff;
  padding-left: 15px;
}
 .el-row {
    margin:20px 50px;
    &:last-child {
      margin-bottom: 0;
    }
  }
 
 .show-box{
   margin-left: 70px;
 }
 .photo-box{
   position: absolute;
   box-sizing: box;
   top:-33px;
   right:125px;
 }

 .photo-box .el-button{
   position: absolute; 
 }
 .photo-box .eqcode{
   top:0px;
   z-index:99;
 }
 .photo-box .vip{
  right: 0;
  top:0;
  z-index:99;
 }
 .photo-box .auth{
   bottom: 0px; 
   left:-8px;
   z-index:99;
 }
  .photo-box .account{
   bottom: 0px; 
   right:0;
    z-index:99;
 }
 .el-img{
   width:100%;
   height: 100%;   
 }
 .eqcode-img{
   display: block;
   text-align: center;
 }
 .lf{
   padding-left:10px;
   cursor: pointer;
 }
 .eqcode-img img{
   width:250px;
   height:250px;
 }

</style>